


Quick and Dirty HTML Reference for AO3

by josephina_x



Series: "No Fandom" -- AO3 and HTML editing guide(s) [1]
Category: No Fandom
Genre: HTML Reference, Multi
Language: English
Status: Completed
Published: 2013-09-03
Updated: 2015-01-26
Packaged: 2017-12-25 11:41:18
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 3
Words: 1,769
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/952658
Author URL: https://archiveofourown.org/users/josephina_x/pseuds/josephina_x
Summary: <blockquote class="userstuff">
              <p>Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.</p>
            </blockquote>





	1. Chapter 1

Begin test.
    
    
    Testing preformatting
    stuff   like
    this. is within a "pre" (<pre></pre>)
    and does not need <br/> stuff in there to go down a line
    or to keep spacing more than    one space:)

Also note that "pre" does NOT have to go within a set of <p></p> (it seems to get removed).

and then trying to test <a thing> here <and here> as well.

<p>and then trying to test <a thing> here <and here> as well.</p>
    
    
    and then trying to test <a thing> here <and here> as well.
    
    
    <pre>and then trying to test <a thing> here &60;and here&#62; as well.</pre>

< OR &#60; is a < (and #60 gets converted to lt)  
> OR &#62; is a > (and #62 gets converted to gt)  
& is a &;

Also note that <a href=""></a> and <img src=""></img> are also useful, as are <p align="center"></p> and <br/> and other style stuff.
    
    
    <p align="center">
      <a href="http://s1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/?action=view&current=LJBanner.jpg"></a>
      <img src="http://i1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/LJBanner.jpg" border="0" alt="Photobucket" /></p>
    

does this:

[](http://s1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/?action=view&current=LJBanner.jpg)

See these pages for more info:  
[Tutorial: Styling Works -- http://archiveofourown.org/admin_posts/119](http://archiveofourown.org/admin_posts/119)  
[Sliding Doors -- http://archiveofourown.org/works/149319?style=disable](http://archiveofourown.org/works/149319?style=disable)  
[Tutorial: HTML Sanitizing and Parsing -- http://archiveofourown.org/admin_posts/92](http://archiveofourown.org/admin_posts/92)  
[HTML pre tag -- http://www.w3schools.com/tags/tag_pre.asp](http://www.w3schools.com/tags/tag_pre.asp)  
[HTML ASCII -- http://www.w3schools.com/tags/ref_ascii.asp](http://www.w3schools.com/tags/ref_ascii.asp)  
[HTML Symbol -- http://www.w3schools.com/tags/ref_symbols.asp](http://www.w3schools.com/tags/ref_symbols.asp)  


Done with test.


	2. Chapter 2

**Summary for the Chapter:**

> Rewritten version of the "first chapter" of my brief notes on editing under AO3. Ignore this if you're subscribed to my fanfic.

Begin test with a `<hr />` :

* * *

That short line is absolutely _pitiful_ , though, and AO3 doesn't seem to support "width" arguments for `hr` at _all_. *frown*

Sooooooooo...

#### Long line via strikeout or delete.

The code:
    
    
    <p>
    <strike>-----------------------------------------------------------------------------------------</strike>
    <del>-----------------------------------------------------------------------------------------</del>
    </p>
    

looks like:

~~\-----------------------------------------------------------------------------------------~~ ~~\-----------------------------------------------------------------------------------------~~

...which is _marginally_ better, at least.

We can center it, too:
    
    
    <p align=center>
    <strike>-----------------------------------------------------------------------------------------</strike>
    <del>-----------------------------------------------------------------------------------------</del>
    </p>
    

looks like:

~~\-----------------------------------------------------------------------------------------~~ ~~\-----------------------------------------------------------------------------------------~~

And to go full-width for the default AO3 template, we do:
    
    
    <p align=center>
    <strike>-------------------------------------------------------------------------------------------------------------------------</strike>
    <del>-------------------------------------------------------------------------------------------------------------------------</del>
    </p>
    

which looks like:

~~\-------------------------------------------------------------------------------------------------------------------------~~ ~~\-------------------------------------------------------------------------------------------------------------------------~~

#### Long line via headings h3 and h6.

We can also cheat via some of the heading types (a.k.a. heading `h3` and `h6`).

The code:
    
    
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    

looks like:

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Note that there is no `h7` or `h8` defined in AO3.

Take advantage of this via:
    
    
    <h3> </h3>
    <h6> </h6>
    

which looks like:

Much cleaner, no? :)

#### Some table HTML that doesn't work on AO3 but would work elsewhere.

AO3 doesn't do background color in tables, but if it did, you could use the following html to get a thin black rectangular block across the entire screen:
    
    
    <table style="width:100%" bgcolor=#000000>
      <tr>
        <td></td>
      </tr>
    </table>
    

You can try out this (or any other) html code here: <http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table>.

And now another three `<hr />` 's to separate things out! :)

* * *

* * *

* * *

#### Preformatting (pre) blocks and inline "code".

The code:
    
    
    <p>
      <code>
    <pre>Testing preformatting
    stuff   like
    this. is within a "pre" (<pre></pre>)
    and does not need <br/> stuff in there to go down a line
    or to keep spacing more than    one space:)</pre>
      </code>
    </p>
    

looks like:
    
    
    Testing preformatting
    stuff   like
    this. is within a "pre" (<pre></pre>)
    and does not need <br/> stuff in there to go down a line
    or to keep spacing more than    one space:)

The code:
    
    
    <pre>Testing preformatting
    stuff   like
    this. is within a "pre" (<pre></pre>)
    and does not need <br/> stuff in there to go down a line
    or to keep spacing more than    one space:)</pre>
    
    
    
    <p>Also note that <code>pre</code> does NOT have to go within a set of <p></p> like <code>code</code> does (it seems to get removed).</p>

looks like:
    
    
    Testing preformatting
    stuff   like
    this. is within a "pre" (<pre></pre>)
    and does not need <br/> stuff in there to go down a line
    or to keep spacing more than    one space:)

Also note that `pre` does NOT have to go within a set of <p></p> like `code` does (it seems to get removed).

#### Testing < and >

You may be wondering by this point why, exactly, I'm using these "<" and ">" things. Well, they show those special characters < and > explicitly in the text (and they're "special" in that they're used to start and end html tags ...which means that trying to write them directly in your HTML when you want to show them as symbols in your text will cause formatting problems, no? :) --Here, explicitly, is an example of how you do it.

The code:
    
    
    <p>and then trying to test <a thing> here <and here> as well.</p>
    

looks like:

and then trying to test <a thing> here <and here> as well.

The code:
    
    
    <pre>and then trying to test <a thing> here &60;and here&#62; as well.</pre>

looks like:
    
    
    and then trying to test <a thing> here <and here> as well.

  


#### Characters to write in the HTML edit box for things to work correctly.

`<` OR `&#60;` gives a < in-text (and the `#60` part gets converted to `lt` by AO3 once the document's HTML text has been saved).  
`>` OR `&#62;` gives a > in-text (and the `#62` part gets converted to `gt` by AO3 once the document's HTML text has been saved).  
`&;` gives a & in-text (thus `&;lt;` gives a < in-text and `&;gt;` gives a > in-text). 

#### Paragraphs, paragraph alignment, embedding an image, breaks

Also note that <a href=""></a> and <img src=""></img> are also useful, as are <p align="center"></p> and <br/> and other style stuff.

#### Embedding images (explicit example).

The code:
    
    
    <p align="center">
      <a href="http://s1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/?action=view&current=LJBanner.jpg"></a>
      <img src="http://i1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/LJBanner.jpg" border="0" alt="Photobucket" /></p>
    

does this:

[](http://s1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/?action=view&current=LJBanner.jpg)

#### Reference links.

See these pages for more info:  
[Tutorial: Styling Works -- http://archiveofourown.org/admin_posts/119](http://archiveofourown.org/admin_posts/119)  
[Sliding Doors -- http://archiveofourown.org/works/149319?style=disable](http://archiveofourown.org/works/149319?style=disable)  
[Tutorial: HTML Sanitizing and Parsing -- http://archiveofourown.org/admin_posts/92](http://archiveofourown.org/admin_posts/92)  
[Technical Questions FAQ | What HTML can I use on the archive? -- http://archiveofourown.org/faq/technical-questions?language_id=en](http://archiveofourown.org/faq/technical-questions?language_id=en)  
[Skins and Archive Interface FAQ -- http://archiveofourown.org/faq/skins-and-archive-interface?language_id=en](http://archiveofourown.org/faq/skins-and-archive-interface?language_id=en)  
[Show Skin | Archive 2.0 Skin (Default Skin) -- http://archiveofourown.org/skins/873](http://archiveofourown.org/skins/873)  
[HTML pre tag -- http://www.w3schools.com/tags/tag_pre.asp](http://www.w3schools.com/tags/tag_pre.asp)  
[HTML ASCII -- http://www.w3schools.com/tags/ref_ascii.asp](http://www.w3schools.com/tags/ref_ascii.asp)  
[HTML Symbol -- http://www.w3schools.com/tags/ref_symbols.asp](http://www.w3schools.com/tags/ref_symbols.asp)  


Done with test. Let's end with a final `<hr />` ...

* * *


	3. Chapter 3

**Summary for the Chapter:**

> More lunatic "editing under AO3" notes-stuff. Ignore this if you're subscribed to my fanfic.

In the process of trying to figure out if there's a good way to do "spoiler" text (and/or hidden or hide-able text) _**without**_ making a CSS stylesheet. Meh.

#### Roll over mouse with popup text boxes

The code:
    
    
    <p>
    <a title="Here is the text, not a clickable link without an 'href' inside the 'a' tag...">Roll mouse over "link" for popup text</a>
    </p>
    

looks like:

Roll mouse over "link" for popup text

The code:
    
    
    <p>
    Roll mouse over symbol for popup text<a class="help symbol question modal" title="Here is the text, which is clickable (oddly) but doesn't seem to navigate anywhere. Clicking again anywhere gets you out of the greyscreen.">
    <span class="symbol question">
    <span>?</span></span></a>
    </p>
    

looks like:

Roll mouse over symbol for popup text ?

The code:
    
    
    <p>Roll mouse over symbol for popup text as before:<br />
    Spoiler alert<a class="symbol question" title="Here is the text, not a clickable link without an 'href' inside the 'a' tag...">
    <span class="symbol exclamation"><span>!</span></span></a>
    </p>
    

looks like:

Roll mouse over symbol for popup text as before:  
Spoiler alert !

Both this code:
    
    
    <p>Roll mouse over text -- not symbol(s) -- for popup text this time:</p>
    <p><span class="symbol exclamation"><span>!</span></span>
    <a title="Hmmmm, I bet you were pretty dissatisfied by that last so-called &#34;spoiler&#34;...
    So let's show you how a multi-line spoiler is done this time!
    Isn't this fun? ;)"><b>SPOILERS WITHIN!</b></a>
    <span class="symbol exclamation"><span>!</span></span> <-- Only mouse-over this text if you are dying to know what awaits you!
    </p>
    

and this code:
    
    
    <p>Roll mouse over text -- not symbol(s) -- for popup text this time:</p>
    <p><span class="symbol exclamation"><span>!</span></span>
    <a title="Hmmmm, I bet you were pretty dissatisfied by that last so-called &#34;spoiler&#34;...&#10;So let's show you how a multi-line spoiler is done this time!&#10;Isn't this fun? ;)"><b>SPOILERS WITHIN!</b></a>
    <span class="symbol exclamation"><span>!</span></span> <-- Only mouse-over this text if you are dying to know what awaits you!
    </p>
    

looks like:

Roll mouse over text -- not symbol(s) -- for popup text this time:

! **SPOILERS WITHIN!** ! <\-- Only mouse-over this text if you are dying to know what awaits you! 

The code:
    
    
    <p><span class="symbol exclamation"><span>!</span></span>
    <a title="Also note that the title does seem to do auto-wrap-around, when we have super-super-super-super-super-super-super-super long sentences going on, thank goodness.
    Here's another example. Or two. Or three. Of sentence stops. Or four! Or five? Or... six. seven. Eight. Notice how the text doesn't do a full-stop until the written line ends :)
    We can, however, force
    lines down more quickly if 
    we want to,
    if and when
    we
    have
    run-on
    sentences! :)"><b>SPOILERS WITHIN!</b></a>
    <span class="symbol exclamation"><span>!</span></span> <-- Only mouse-over this text if you are dying to know what awaits you!
    </p>
    

looks like:

! **SPOILERS WITHIN!** ! <\-- Only mouse-over this text if you are dying to know what awaits you! 

#### Attempts to use default CSS options via <span class="">

The code:
    
    
    <p>
      <span class="white">
    <span>test text is not white, sigh</span></span>
    </p>
    

looks like:

test text is not white, sigh

The code:
    
    
    <p>
      <span class="hidden">
    <span>test text hidden</span></span>
    </p>
    

looks like:

test text hidden

#### From the [Sliding Doors](http://archiveofourown.org/works/149319) example, actual CSS changes to the #workskin:

The code:
    
    
    /* SPECIAL CASES */
    
    #workskin .spoiler {
       background: #333;
       color: #333;
    }
    
    <p>
    <span class="spoiler" title="This is a warning that is also a spoiler. Highlight to read.">You just totally spoiled yourself, dude.</span>
    </p>

looks like:

You just totally spoiled yourself, dude.


End file.
